<template>
  <div class="financial">
    <el-card class="!border-none" shadow="never">
      <el-button type="primary" size="small" @click="handleAdd">
        <template #icon>
                    <icon name="el-icon-Plus" />    
         </template>
        新增</el-button>
    </el-card>
    <el-card v-loading="pager.loading" class="mt-2 !border-none" shadow="never">
      <mtable
        :data="pager.lists"
        :type="typeTable"
        :list="options.tableTile"
        :operation="true"
        :tableheight="getTableheight"
        :bill="false"
        @handleAdds="handleAdds"
      >
        <template #tool="{ item }">
          <el-table-column
            v-if="item.display == 1"
            sortable
            :label="item.name"
            show-overflow-tooltip
            :prop="item.value"
            :width="item.width"
          >
          </el-table-column>
        </template>
        <template #operation="{ row }">
          <el-button type="primary" link @click="handleEdit(row)">
            编辑
          </el-button>
          <el-popconfirm
            title="确定要删除当前请款单位吗?"
            @confirm="handleDel(row.id)"
          >
            <template #reference>
              <el-button type="danger" link> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </mtable>
      <div class="flex justify-end">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <EdittablePopup
      v-if="showTable"
      ref="editRefs"
      :type="typeTable"
      @success="getLists"
      @close="onclo"
    />
    <AddPopup
      v-if="showAddPopup"
      ref="addPopupRef"
      @success="getLists"
      @close="showAddPopup = false"
    />
    <EditPopup
      v-if="showEditPopup"
      ref="editPopupRef"
      @success="getLists"
      @close="showEditPopup = false"
    />
  </div>
</template>

<script lang="ts" setup>
import { usePaging } from "@/hooks/usePaging";
import { adminListss, adminDelete } from "@/api/financial/lists";
import { getCommonFieldDisplay } from "@/api/tools/code";
import mtable from "@/components/table/index.vue";
import EdittablePopup from "@/components/settable/index.vue";
import AddPopup from "./add.vue";
import EditPopup from "./edit.vue";
onMounted(() => {
  getLists();
  fetchCommonFieldDisplay();
});
const { pager, getLists } = usePaging({ fetchFun: adminListss });
const options = reactive({ tableTile: [] });
// 表格的最大高度
const getTableheight = computed(() => {
  return parseInt(document.documentElement.clientHeight + "") - 185 + "px";
});
// 公共的表头字段
const typeTable = "listing_unit";
const fetchCommonFieldDisplay = async () => {
  const data = await getCommonFieldDisplay({ type: typeTable });
  options.tableTile = data;
  console.log("🚀🚀🚀 公共的表头字段", data);
};
// 设置表头字段弹窗
const showTable = ref(false);
const editRefs = shallowRef<InstanceType<typeof EdittablePopup>>();
const handleAdds = async () => {
  showTable.value = true;
  await nextTick();
  editRefs.value?.open("add");
};
const onclo = () => {
  // showEdit.value = false;
  // getOptions();
};
// 新增弹窗
const addPopupRef = ref();
const showAddPopup = ref(false);
const handleAdd = async () => {
  showAddPopup.value = true;
  await nextTick();
  addPopupRef.value?.open();
};
// 编辑
const editPopupRef = ref();
const showEditPopup = ref(false);
const handleEdit = async (row: {}) => {
  showEditPopup.value = true;
  await nextTick();
  editPopupRef.value?.setFormData({ ...row });
  editPopupRef.value?.open();
};
// 删除
const handleDel = async (id: string) => {
  await adminDelete({ id });
  getLists();
};
</script>
<style scoped lang="scss"></style>
